<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/css/mini-nord.min.css">
  <link rel="stylesheet" href="/static/iconfont/iconfont.css">
  <title>萌点后台管理系统</title>
  <script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #header{
      height:56px;
      width: 100%;
      border:1px solid rgba(3,119,165,100);
      background:rgba(3,119,165,100);
      position:fixed;
      z-index: 999;
    }
    #header a{
      color:black;
      text-decoration:none;
    }
    #header a:hover{
      color: #df5621;
    }
    #h2{
      color: white;
    }
    .daohang{
      list-style-type: none;
      margin:0;
      padding:0;
    }
    .daohang li{
      display: block;
      height: 70px;
      text-align:center;
      line-height: 5px;
      color: white;
    }
    .daohang li:hover{
      background-color: white;
      color:rgba(3,119,165,100);
    }
    #left{
      position: fixed;
      top:56px; width:5%; 
      height: 100%; left: 0; 
      background-color:rgba(3,119,165,100)
    }
    #userinfo{
      color:white;
      position: absolute;
      right: 100px;
      top: 20px
    }
    #list {
      position:absolute;
      top:68px;
      margin-left:64px ;
    }
    #list ul{
        margin: 0px;
        padding: 0px;
    }
    #list a{
      display: inline;
      text-align: center;
    }
    #list li{ 
        list-style: none;
        width: 85px;
        padding: 10px;
    }
    #list li:hover{
        background-color: #e1f1f9;
        color:rgba(3,119,165,100);
    }
    li a:hover{
        text-decoration: none;
    }
    #content{
      position: absolute;
      top:68px;
      left:160px;
    }
    tr th{
      text-align: center;
    }
    tr td{
      text-align: center;
      padding:0px;
      font-size: 13px;
    }
    .active{
      background-color: #e1f1f9;
      color:rgba(3,119,165,100);
    }
    button{
      font-size: 10px;
    }
  </style>
</head>
<body>
  <div id='header'>
    <div id='h2'><h2 style='margin-left: 50px;'>萌点后台管理系统</h2></div>
    <div id="userinfo" class="userinfo"></div>
  </div>
  <div>
      <div id='left'>
        <ul class="daohang">
          <li onclick="toHome()">
            <i style="font-size:25px" class='iconfont iconshouye'></i>
            <p style="font-size:10px">首页</p>
          </li>
          <li onclick="toDongtai()"> 
            <i style="font-size:25px" class='iconfont iconfaburenwu'></i>
            <p style="font-size:10px">动态</p>
          </li>
          <li onclick="toUser()">
            <i style="font-size:25px" class='iconfont iconyonghu'></i>
            <p style="font-size:10px">用户</p>
          </li>
          <li onclick="toAdmin()">
            <i style="font-size:25px" class='iconfont iconyonghu1'></i>
            <p style="font-size:10px">管理员</p>
          </li>
          <li style='background-color: white;color:rgba(3,119,165,100);' onclick="toElse()">  
            <i style="font-size:25px" class='iconfont iconguanli'></i>
            <p style="font-size:10px">管理</p>
          </li>
        </ul>
      </div>
      <div id='list'>
          <ul id='ul'>
              <li class='active' onclick="getGoods()"><a>商品列表</a></li>
              <li onclick="getShop()"><a>店铺列表</a></li>
              <li onclick="getDingdan()"><a>订单列表</a></li>
              <li onclick="getAs()"><a>志愿管理</a></li>
              <li onclick='getComment()'><a>评论列表</a></li>
          </ul>
      </div>
      <div id='content'></div>
  </div>
  <script>
    var content=document.getElementById('content')
    $('#ul li').click(function(){
      $('#ul li').removeClass('active');
      $(this).addClass('active');
    })
    //登录判断
    function getToken () {
      return localStorage.getItem('token') || ''
    }
    function getMyInfo () {
      let uinfo = localStorage.getItem('userinfo')
      if (uinfo) {
        try {
          return JSON.parse(uinfo)
        } catch (err) {
          return null
        }
      }
      return null
    }
    function checkLogin() {
      let tk = getToken()
      if (!tk) {
        location.href = '/login'
        return
      }
      let uinfo = getMyInfo()
      if (uinfo === null) {
        location.href = '/login'
      } else {
        //登录超时
        if (uinfo.time + uinfo.expires < Date.now()) {
          localStorage.removeItem('token')
          localStorage.removeItem('userinfo')
          location.href = '/login'
        }
      }
    }
    //检测是否登录并跳转
    checkLogin()
    
    //跳转函数
    function toHome(){
      location.href='/home'
    }
    function toDongtai(){
      location.href='/dongtai'
    }
    function toUser(){
        location.href='/user'
    }
    function toElse(){
      location.href='/else'
    }
    function toAdmin(){
      location.href='/admin'
    }
    //fetch封装
    function apicall (path, options = {}) {
      let token = getToken()
      let q = '?'
      if (path.indexOf('?') > 0) {
        q = '&'
      }
      path = `${path}${q}token=${token}`
      return fetch(path, options).then(async res => {
        if (!res.ok) {
          let errtext = await res.text()
          throw new Error(`${res.status} : ${errtext}`)
        } else {
          return res.text()
        }
      })
    }

    //登录用户信息
    function getUserInfo (id) {
      return apicall('/user/admin/'+id).then(d => {
        let uinfo = JSON.parse(d)
        showUserInfo(uinfo)
      })
      .catch(err => {
        alert(err.message)
      })
    }
    function showUserInfo (u) {
      let html = `
        <a style='color:white' href='/manage'>${u.username}</a>
        <a href="javascript:logout(this);">
          退出
        </a>
      `
      document.getElementById('userinfo').innerHTML = html
    }

    //获取商品列表
    function getGoods() {
      apicall('/user/goods').then(d => {
        showGoods(JSON.parse(d) )
      }).catch(err => {
        alert(err.message)
      })
    }
    //展示商品列表
    function showGoods (ulist) {
      console.log(ulist)
      var html=`<p style='font-size:10px'>管理>商品列表</p>
      <table width="95%" id="tb">
        <tr>
          <th>商品ID</th>
          <th>商品名</th>
          <th>商品数量</th>
          <th>商品类型</th>
          <th>品牌</th>
          <th>产地</th>
          <th>操作</th>
        </tr>
        </table>
      `
      content.innerHTML=html;
      var tb=document.getElementById('tb')
      for (let i = 0; i < ulist.length; i++) {
        var tdNode = `
          <td>${ulist[i].goodsid}</td><td>${ulist[i].goodsname}</td>
          <td>${ulist[i].goodsnum}</td><td>${ulist[i].goodstype}</td>
          <td>${ulist[i].pinpai}</td><td>${ulist[i].shengchan}</td>
          <td><button>编辑</button><button onclick="del(this)">删除</button>
          </td>`
        var trNode = document.createElement("tr");
        trNode.innerHTML = tdNode;
        tb.appendChild(trNode);
      }
    }

    //获取店铺列表
    function getShop(){
      apicall('/user/shop').then(d => {
        showShop(JSON.parse(d) )
      }).catch(err => {
        alert(err.message)
      })
    }
    //展示店铺列表
    function showShop (ulist) {
      var html=`<p style='font-size:10px'>管理>店铺列表</p>
      <table width="95%" id="tb">
        <tr>
          <th>店铺ID</th>
          <th>店铺名</th>
          <th>入驻时间</th>
          <th>操作</th>
        </tr>
        </table>
      `
      content.innerHTML=html;
      var tb=document.getElementById('tb')
      for (let i = 0; i < ulist.length; i++) {
        var tdNode = `
          <td>${ulist[i].shopid}</td>
          <td>${ulist[i].shopname}</td>
          <td>${ulist[i].reg_time}</td>
          <td><button>编辑</button><button onclick="del(this)">删除</button>
          </td>`
        var trNode = document.createElement("tr");
        trNode.innerHTML = tdNode;
        tb.appendChild(trNode);
      }
    }
    
    //获取订单列表
    function getDingdan(){
      apicall('/user/dingdan').then(d => {
        showDingdan(JSON.parse(d) )
      }).catch(err => {
        alert(err.message)
      })
    }
    //展示订单列表
    function showDingdan(ulist){
      var html=`<p style='font-size:10px'>管理>订单列表</p>
      <table width="95%" id="tb">
        <tr>
          <th>订单ID</th>
          <th>商品名称</th>
          <th>购买数量</th>
          <th>地址</th>
          <th>支付情况</th>
          <th>备注</th>
          <th>操作</th>
        </tr>
        </table>
      `
      content.innerHTML=html;
      var tb=document.getElementById('tb')
      for (let i = 0; i < ulist.length; i++) {
        var tdNode = `
          <td>${ulist[i].id}</td>
          <td>${ulist[i].goodsname}</td>
          <td>${ulist[i].goodsnum}</td>
          <td>${ulist[i].address}</td>
          <td>${ulist[i].pay}</td>
          <td>${ulist[i].beizhu}</td>
          <td><button>编辑</button><button onclick="del(this)">删除</button>
          </td>`
        var trNode = document.createElement("tr");
        trNode.innerHTML = tdNode;
        tb.appendChild(trNode);
      }
    }

    //获取评论列表
    function getComment(){
      apicall('/user/comment').then(d => {
        showComment(JSON.parse(d) )
      }).catch(err => {
        alert(err.message)
      })
    }
    //展示评论列表
    function showComment (ulist) {
      var html=`<p style='font-size:10px'>管理>评论列表</p>
      <table width="95%" id="tb">
        <tr>
          <th>评论ID</th>
          <th>评论内容</th>
          <th>评论时间</th>
          <th>操作</th>
        </tr>
        </table>
      `
      content.innerHTML=html;
      var tb=document.getElementById('tb')
      for (let i = 0; i < ulist.length; i++) {
        var tdNode = `
          <td>${ulist[i].commentid}</td>
          <td>${ulist[i].commenttext}</td>
          <td>${ulist[i].commenttime}</td>
          <td><button onclick="del(this)">删除</button>
          </td>`
        var trNode = document.createElement("tr");
        trNode.innerHTML = tdNode;
        tb.appendChild(trNode);
      }
    }
    
    //获取志愿列表
    function getAs(){
      apicall('/user/aspiration').then(d => {
        showAs(JSON.parse(d) )
      }).catch(err => {
        alert(err.message)
      })
    }
    //展示志愿列表
    function showAs (ulist) {
      let res
      var html=`<p style='font-size:10px'>管理>志愿管理</p>
      <table width="95%" id="tb">
        <tr>
          <th>活动ID</th>
          <th>志愿内容</th>
          <th>志愿地点</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <th>发起人</th>
          <th>操作</th>
        </tr>
        </table>
      `
      content.innerHTML=html;
      var tb=document.getElementById('tb')
      for (let i = 0; i < ulist.length; i++) {
        if(ulist[i].aspexamine==1){
          res='审核通过'
        }else if(ulist[i].aspexamine==2){
          res='审核中'
        }else if(ulist[i].aspexamine==3){
          res='审核未通过'
        }
        var tdNode = `
          <td>${ulist[i].aspirationid}</td>
          <td>${ulist[i].aspname}</td>
          <td>${ulist[i].asplocal}</td>
          <td>${ulist[i].start}</td>
          <td>${ulist[i].endtime}</td>
          <td>${ulist[i].holder}</td>
          <td><button>删除</button>
          </td>`
        var trNode = document.createElement("tr");
        trNode.innerHTML = tdNode;
        tb.appendChild(trNode);
      }
    }
    
    //通过审核
    function pass(that){
      let msg={aspexamine:1}
      var p=that.parentNode.parentNode;
      var id=p.cells[0].innerText
      apicall('/user/aspiration/'+id,{
        method:'PUT',
        headers : {
          'content-type' : 'text/plain;charset=utf-8'
        },
        body:JSON.stringify(msg)
      }).then(d => {
        console.log(d)
      }).catch(err => {
        alert(err.message)
      })
      alert('用户'+id+'志愿审核已通过！')
      location.href='else'
    }

    //退出登录
    function logout () {
      if (!confirm('确定退出？')) {
        return
      }
      localStorage.removeItem('token')
      localStorage.removeItem('userinfo')
      location.href = '/login'
    }
   
    window.onload = () => {
      getUserInfo('self')
      getGoods()
    }

  </script>
</body>
</html>